<template>
	<view class="detailMain">
		<!-- 基础信息 -->
		<view class="det-box">
			<view class="uni-flex uni-row det-top">
				<view class="flex-item-3 font-weight det-title"
					style="width: 60%;text-align: left;padding-left: 10px;">
					<!-- text-overflow: ellipsis;white-space: nowrap;overflow: hidden; -->
					{{detailData.assetName}}
				</view>
				<view class="flex-item-3 font-weight det-title">
					{{detailData.storageLocationName}}
				</view>
				<view class="flex-item-3">
					<view class="det-status"
						:class="detailData.statusCh=='使用中'?'color-b-bg':detailData.statusCh=='闲置中'?'color-p-bg':detailData.statusCh=='已报废'||detailData.statusCh=='故障中'?'color-r-bg':'color-y-bg'">
						{{detailData.statusCh}}
					</view>
				</view>
			</view>
			<view class="det-box-con">
				<view class="cell-title">
					<view class="cell-t-in">基础信息</view>
					<view class="v-m right color-green r-item" @click="showQRcode">查看二维码</view>
					<!-- <u-qrcode ref="qrcode" canvas-id="qrcode" :value="detailData.assetNo" :size="100"></u-qrcode> -->
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">资产编号：</view>
					<view class="flex1 t-r">{{detailData.assetNo}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">财务编号：</view>
					<view class="flex1 t-r">{{detailData.financeNo}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">SN编号：</view>
					<view class="flex1 t-r">{{detailData.snNo}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">资产类型：</view>
					<view class="flex1 t-r">{{detailData.assetTypeCh}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">规格型号：</view>
					<view class="flex1 t-r">{{detailData.specification}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">出厂日期：</view>
					<view class="flex1 t-r">{{detailData.manufactureDate}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">购入日期：</view>
					<view class="flex1 t-r">{{detailData.purchaseDate}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">使用期限：</view>
					<view class="flex1 t-r">{{detailData.usefulLife}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">资产来源：</view>
					<view class="flex1 t-r">{{detailData.assetOriginCh}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">资产原值：</view>
					<view class="flex1 t-r">{{detailData.purchasePrice}}元</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">计量单位：</view>
					<view class="flex1 t-r">{{detailData.measUnitCh}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">品牌：</view>
					<view class="flex1 t-r">{{detailData.assetBrand}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">资产所属：</view>
					<view class="flex1 t-r">{{detailData.belongToTypeName}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">资产管理类型：</view>
					<view class="flex1 t-r">{{detailData.manageTypeName}}</view>
				</view>
				<view class="det-re">备注信息：{{detailData.remarks}}</view>
			</view>

		</view>
		<!-- 维保信息 -->
		<view class="det-box">
			<view class="det-box-con">
				<view class="cell-title">
					<view class="cell-t-in">维保信息</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">供应商名称：</view>
					<view class="flex1 t-r">{{detailData.supplierName}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">联系人：</view>
					<view class="flex1 t-r">{{detailData.supplierLinkman}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">联系电话：</view>
					<view class="flex1 t-r">{{detailData.supplierLinkmanTel}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">维保期限：</view>
					<view class="flex1 t-r">{{detailData.warrantyExpires}}</view>
				</view>

			</view>
		</view>
		<!-- 附件信息 -->
		<view class="det-box" v-if="imgList.length > 0">
			<view class="det-box-con">
				<view class="cell-title">
					<view class="cell-t-in">附件信息</view>
				</view>
				<view class="uni-flex uni-row line-det" v-for="(item,index) in imgList" :key="index">
					<view class="width100" style="width: 250px;">{{item.enclName}}：</view>
					<view class="flex1 t-r color-green" v-if="imgList.length > 0" @click="previewImage(item.enclUrl)">查看
					</view>
				</view>
			</view>
		</view>
		<!-- 申请信息 -->
		<view class="det-box" v-if="applyInfo.assetExecDtlId">
			<view class="det-box-con">
				<view class="cell-title">
					<view class="cell-t-in">申请信息</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">申请类型：</view>
					<view class="flex1 t-r color-green">{{applyInfo.assetApplyTypeCh}}</view>
				</view>
				<!-- <view class="uni-flex uni-row line-det">
					<view class="width100">申请级别：</view>
					<view class="flex1 t-r">{{applyInfo.urgencyLevelCh}}</view>
				</view> -->
				<view class="uni-flex uni-row line-det">
					<view class="width100">申请人：</view>
					<view class="flex1 t-r">{{applyInfo.applicantName}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">申请时间：</view>
					<view class="flex1 t-r">{{applyInfo.applyTime}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view>描述信息：</view>
					<view class="flex1 t-r">{{applyInfo.remarks}}</view>
				</view>
				<view class="uni-flex uni-row line-det">申请附件：</view>
				<uni-grid :column="3">
					<uni-grid-item v-for="(item,index) in photoList">
						<image style="width: 100%; height: 100px; background-color: #eeeeee;" mode="aspectFit"
							:src="item" @click="previewImage2(photoList)"></image>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<!-- 申请处理信息 -->
		<view class="det-box" v-if="applyInfo.assetExecDtlId">
			<view class="det-box-con">
				<view class="cell-title">
					<view class="cell-t-in">申请处理信息</view>
					<view class="apply-stu" :class="applyInfo.statusCh=='待确认'?'btn-blue-s':'btn-red-s'">
						{{applyInfo.statusCh}}
					</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">处理人：</view>
					<view class="flex1 t-r">{{applyInfo.executorName||'--'}}</view>
				</view>
				<view class="uni-flex uni-row line-det">
					<view class="width100">处理时间：</view>
					<view class="flex1 t-r">{{applyInfo.execTime}}</view>
				</view>

			</view>
		</view>

		<!-- 二维码展示 -->
		<uni-popup ref="qrcodePop" type="dialog">
			<uni-popup-dialog type="warn" :title="'资产编号：'+detailData.assetNo" @close="close" @confirm="close">
				<!-- 二维码展示 -->
				<u-qrcode ref="qrcode" canvas-id="qrcode" :value="detailData.assetNo" :size="100"></u-qrcode>
			</uni-popup-dialog>
		</uni-popup>


		<view :class="{'bottom-btn':true,'permission-none':isPermission('ASS_APP_INSERT')}"
			v-if="detailData.statusCh=='使用中'">
			<view class="toHand">
				<!-- <button class="button btn-orange" size="mini" @click="toRetrue()"><text
						class="iconfont icon-tuihui"></text>&nbsp;&nbsp;退回</button> -->
						<button class="button btn-orange" size="mini" @click="toUnUsed()"><text
								class="iconfont icon-tuihui"></text>&nbsp;&nbsp;闲置</button>
				<button class="button btn-green" size="mini" @click="toRepair()"><text
						class="iconfont icon-baoxiu-xuanzhong"></text>&nbsp;&nbsp;报修</button>
				<button class="button" type="warn" size="mini" @click="toScrap()"><text
						class="iconfont icon-chanquanbaofei-xian"></text>&nbsp;&nbsp;报废</button>
			</view>
		</view>
		<view class="bottom-btn" v-if="applyInfo.assetExecDtlId && applyInfo.status && applyInfo.status==6">
			<view class="toHand">
				<button class="button btn-orange" v-if="applyInfo.assetApplyType == 4" size="mini"
					@click="toAccept(9)">验收不通过</button>
				<button class="button btn-green" size="mini" @click="toAccept(8)">确认验收</button>
			</view>
		</view>
		
		<view class="bottom-btn"
			v-if="applyInfo.assetExecDtlId && applyInfo.statusCh && applyInfo.statusCh=='待提交'">
			<view class="toHand">
				<button class="button btn-green" size="mini" @click="toExamine">提交审核</button>
			</view>
		</view>
		<view class="bottom-btn"
			v-if="(detailData.status!=99)&&applyInfo.assetExecDtlId && applyInfo.statusCh && applyInfo.statusCh=='待实施'">
			<view class="toHand">
				<button class="button btn-green" size="mini" @click="toExec">开始实施</button>
			</view>
		</view>
		<MessageTip ref="messageTip" :tipContent="tipContent" @clickType="handleShowOrHideTip" />
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onBackPress
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import {
		assetDetail,
		assetApplyInfo,
		assetAccept,
		assetSign,
		applyExamine,
		unusedAsset,
		exec
	} from "@/common/api/assetAPI.ts";
	import {
		repairDetail,
		repairConfirm,
		viewPhoto
	} from '@/common/api/repairEquipment.ts'
	import {
		imgURL,
		IMGVIEW
	} from "@/common/config/config.ts";
	import {
		isPermission
	} from '@/common/util/common.ts'

	const detailData = ref({});
	const qrcodePop = ref();
	const qrcode = ref();
	const imgList = ref([]);
	const applyInfo = ref({}); //申请详情
	// const alertDialog = ref();
	const alertMeg = ref();
	const acceptStus = ref();
	const photoList = ref([]);


	const tipContent = ref('')
	const messageTip = ref()

	onLoad((pathPrams) => {
		detailData.value = JSON.parse(pathPrams.qrCode);
		//故障中--获取故障详情
		getApplyInfo(detailData.value.assetId);

		getDetail();
	});
	const getDetail = () => {
		//通过资产编号获取资产详情
		assetDetail(detailData.value.assetNo).then((res: any) => {
			// console.log('详情数据', res.data);
			detailData.value.statusCh = res.data.statusCh;
			detailData.value.status = res.data.status;
			detailData.value.measUnitCh = res.data.measUnitCh;

			detailData.value.manageTypeName = res.data.manageTypeName
			detailData.value.belongToTypeName = res.data.belongToTypeName

			if (res.data.sysEnclResponses) {
				imgList.value = res.data.sysEnclResponses;

				// res.data.sysEnclResponses.forEach((em: any) => {
				// 	imgList.value.push(imgURL + em.enclUrl);
				// })
				// console.log('图片地址', imgList.value)
			}
		})
	}

	const toPre = (url: string) => {
		imgUrlPre.value = url
		imgFlag.value = !imgFlag.value
	}
	//获取申请详情
	const getApplyInfo = (assetId) => {
		assetApplyInfo(
			assetId, {
				assetId: assetId,
				page: 1,
				rows: -1
			}
		).then((res: any) => {
			if (res.code == 0) {
				if (res.data.records.length > 0) {
					applyInfo.value = res.data.records[0];
					if (applyInfo.value.applyTime) {
						applyInfo.value.applyTime = applyInfo.value.applyTime.replace('T', " ");
					}
					getPhoto(); //获取申请图片
				}
			}
		})
	}
	//获取申请图片
	const getPhoto = () => {
		viewPhoto(applyInfo.value.assetApplyId).then((res: any) => {
			if (res.code == 0) {
				res.data.forEach((em: any) => {
					photoList.value.push(imgURL + em.enclUrl);
				})
			}
		})
	}

	//  报废
	const toScrap = () => {
		const assetData = JSON.stringify(detailData.value)
		uni.navigateTo({
			url: `/pages/scrapEquipment/submitScrapApply/index?assetData=${assetData}`,
		})
	}
	// 报修
	const toRepair = () => {
		const assetData = JSON.stringify(detailData.value)
		uni.navigateTo({
			url: `/pages/repairEquipment/submitRepairApply/index?assetData=${assetData}`,
		})
	}
	// 退回
	const toRetrue = () => {
		const assetData = JSON.stringify(detailData.value)
		uni.navigateTo({
			url: `/pages/assets/assetDetail/toRetrue?assetData=${assetData}`,
		})
	}
	// 闲置
	const toUnUsed = ()=>{
		tipContent.value = '确定闲置该资产吗？'
		messageTip.value.openTip()
	}
	const dialogConfirmUnused = ()=>{
		unusedAsset([detailData.value]).then((res)=>{
			if(res.code==0){
				uni.showToast({
					title:res.message,
					icon:"none",
					duration:500
				})
				setTimeout(()=>{
					getDetail()
					// page.value = CONSTANT.initPage; //重置页码
					// assetsList.value = []; //重置列表
					// getList()
				},500)
			}else{
				uni.showToast({
					title:res.message,
					icon:"none"
				})
			}
		})
	}
	// 实施
	const toExec = ()=>{
		tipContent.value = '确认实施吗？'
		messageTip.value.openTip()
	}
	const dialogConfirmExec = ()=>{
		exec({...applyInfo.value}).then((res:any)=>{
			if(res.code==0){
				uni.showToast({
					icon:"none",
					duration:500,
					title:res.message
				})
				setTimeout(() => {
					getDetail()
					getApplyInfo(detailData.value.assetId)
				}, 500)
			}else{
				uni.showToast({
					icon:"none",
					duration:500,
					title:res.message
				})
			}
		})
	}
	//提交审核
	const toExamine = (item) => {
		tipContent.value = '确认提交审核吗？'
		messageTip.value.openTip()
	}
	const dialogConfirmExamine = () => {
		applyExamine({
			assetApplyId: applyInfo.value.assetApplyId,
			version: applyInfo.value.applyVersion
		}).then(value => {
			if (value.code == 0) {
				uni.showToast({
					title: value.message,
					icon: "none",
					duration:500
				});
				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/assets/assetDetail/index?qrCode=${JSON.stringify(detailData.value)}`,
					})
					// getDetail()
					// getApplyInfo(detailData.value.assetId)
				}, 500)
			} else {
				uni.showToast({
					title: value.message,
					icon: "none"
				});
			}
		})
	}

	//验收
	const toAccept = (type) => {
		acceptStus.value = type;

		if (type === 8) {
			tipContent.value = "确认设备验收通过？"
		} else {
			tipContent.value = "确认设备验收不通过？"
		}
		messageTip.value.openTip()
	}
	const handleShowOrHideTip = (type: string) => {
		if (type == 'yes') {
			if (tipContent.value == '确认提交审核吗？') {
				dialogConfirmExamine()
			}else if(tipContent.value == '确定闲置该资产吗？'){
				dialogConfirmUnused()
			}else if(tipContent.value == '确认实施吗？'){
				dialogConfirmExec()
			}else {
				dialogConfirm()
			}
		}
	}
	//验收通过或不通过
	const dialogConfirm = () => {
		assetSign([{
			assetExecDtlId: applyInfo.value.assetExecDtlId, //实施id
			status: acceptStus.value,
			version: applyInfo.value.version,
			confirmResult: '',
		}]).then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: res.message,
					icon: "none",
					duration:500
				});
				setTimeout(() => {
					// uni.redirectTo({
					// 	url: '/pages/assets/assetManage/index',
					// })
					uni.redirectTo({
						url: `/pages/assets/assetDetail/index?qrCode=${JSON.stringify(detailData.value)}`,
					})
					// getDetail()
					// getApplyInfo(detailData.value.assetId)

				}, 500)
			}
		})
	}

	const showQRcode = () => {
		qrcodePop.value.open();
		setTimeout(() => {
			qrcode.value.remake();
		})
	}
	const close = () => {
		qrcodePop.value.close();
	}
	//预览
	const previewImage2 = (urls) => {
		uni.previewImage({
			current: 0,
			urls: urls,
			//长按操作
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {},
				fail: function(err) {}
			}
		})
	}
	const previewImage = (urls: any) => {
		console.log('------------', urls);
		let suffix = urls.split('.')[urls.split('.').length - 1]
		console.log(suffix);
		let img = ['jpg', 'png', 'webp', 'jpeg']
		if (img.includes(suffix)) {
			urls = [imgURL + urls]
			console.log(urls);
			uni.previewImage({
				current: 0,
				urls: urls,
				//长按操作
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {},
					fail: function(err) {}
				}
			})
		} else {
			urls = IMGVIEW + urls
			uni.showLoading({
				title: '加载中'
			})

			uni.downloadFile({
				url: urls, //后端返回的文件地址
				success: function(res) {
					if (res.statusCode === 200) {
						uni.openDocument({
							showMenu: true,
							filePath: res.tempFilePath,
							success: function(res) {
								console.log(res, '打开文件成功')
							},
							fail: (err) => {
								uni.showToast({
									title: '打开文件失败请重试',
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: '打开文件失败请重试',
							icon: 'none'
						})
					}
					uni.hideLoading()
				},
				fail: (err) => {
					uni.hideLoading()
					uni.showToast({
						title: '加载失败请重试',
						icon: "none"
					})
				}
			})
		}

	}
</script>

<style scoped lang="scss">
	.detailMain {
		padding: 10px;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 70px;

		.det-box {
			border: 1px solid #ddd;
			border-radius: 5px;
			box-shadow: 2px 2px 2px #eee;
			background: #fff;
			margin-bottom: 10px;
			overflow: auto;

			.det-top {
				border-bottom: 1px solid #ddd;
				padding: 6px 0;
				box-sizing: border-box;
			}

			.det-title {
				line-height: 30px;
				text-align: center;
			}

			.det-status {
				float: right;
				padding: 2px 15px;
				margin-top: 5px;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				font-size: 12px;
			}
		}

		.det-box-con {
			padding: 0 15px;
			background: #fff;

			.cell-title {
				border-bottom: 1px dashed #ddd;

			}

			.cell-t-in {
				display: inline-block;
				vertical-align: middle;
				padding: 0 10px;
				border-left: 3px solid #18896b;
				font-weight: bold;
				margin: 10px 0;
			}

			.r-item {
				margin: 10px 0;
			}

			.line-det {
				line-height: 28px;
				color: #666;
				font-size: 14px;
			}

			.det-re {
				color: #999;
				border-top: 1px dashed #ddd;
				margin-top: 10px;
				padding: 10px 0;
			}
		}
	}

	.apply-stu {
		float: right;
		display: inline-block;
		border-radius: 20px;
		font-size: 12px;
		padding: 2px 15px;
		margin-top: 10px;
	}

	.toHand {
		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-evenly;
	}

	.toHand>button {
		width: 30%;
		border-radius: 20px;
		line-height: 30px;
	}
</style>
